{% extends "index.xhtml" %}
{% block css %}
<style type="text/css">
    .debug {
        clear: both;
        position: relative;
        width: 50%;
        left: 20%;
    }
    
    .spandebug {
        font-weight: bold;
        color: #ee0000;
    }
    
    .logo {
        right: 25%;
        top: 20%;
        width: 30%;
        float: right;
        position: relative;
        font-size: 140%;
        font-weight: bold;
    }
    
    .welcome_head {
        text-align: right;
        padding-right: 20px;
        padding-top: 10px;
        font-size: 80%;
        position: relative;
        float: right;
        right: -30%;
        width: 25%;
    }
    
    .menuid {
        display: none;
    }
    
    .menu, .menu_end {
        border-left-width: 1px;
        border-left-color: #606060;
        border-left-style: solid;
        border-top-width: 1px;
        border-top-color: #606060;
        border-top-style: solid;
        padding: 5px;
        width: 90%;
        cursor: pointer;
    }
    
    .menu_end {
        border-bottom-width: 1px;
        border-bottom-color: #606060;
        border-bottom-style: solid;
    }
    
    .menu_selected {
        background-color: #e0e0e0;
    }
</style>
<script type="text/javascript">
    
    // store the menu items
    var menuitems = [];
    var selectedmenu = 0;
    
    /**
     * set selected style
     */
    function setSelectedClassMenuStyle(number){
        setClass(menuitems[number], ((number < menuitems.length - 1) && 'menu' || 'menu_end') + ' menu_selected');
    }
    
    function setUnSelectedClassMenuStyle(number){
        setClass(menuitems[number], ((number < menuitems.length - 1) && 'menu' || 'menu_end') + ' menu');
    }
    
    function setSelectedMenuStyle(number_){
        var number = parseInt(number_, 0);
        if (number < menuitems.length) {
            setUnSelectedClassMenuStyle(selectedmenu);
            setSelectedClassMenuStyle(number);
            selectedmenu = number;
        }
    }
    
    
    /**
     * callback for select item of the left menu
     */
    function onSelectMenu(){
        if (!isWait()) {
            var menuid;
            var child = getFirstNode(this);
            while (child) {
                if (child.className == 'menuid') {
                    menuid = child.firstChild.nodeValue;
                    setSelectedMenuStyle(menuid);
                    
                    var params = 'menuid=' + menuid;
                    sendRequest('menu', params, onSelectMenuResponse);
                    break;
                }
                child = child.nextSibling;
            }
            setWait();
        }
    }
    
    /**
     * callback for get response from select of the menu item
     */
    function onSelectMenuResponse(){
        if (httpRequest.readyState == 4) {
            if (httpRequest.status == '200') {
                if (!applyResponse(httpRequest.responseXML.documentElement, 'main')) {
                    setDebugMessage('Bad response ' + httpRequest.status + ' ' + httpRequest.statusText);
                }
            }
            else {
                setDebugMessage(httpRequest.status + ' ' + httpRequest.statusText);
            }
            cleanWait();
        }
    }
    
    
    function bodymain(){
        globalInit();
        // initialize menu's items
        var leftmenu = document.getElementById('leftmenu');
        var child = getFirstNode(leftmenu);
        var i = 0;
        while (child) {
            if (child.nodeType == 1) {
                menuitems[i++] = child;
                child.onclick = onSelectMenu;
            }
            child = child.nextSibling;
        }
        
        // initialize menu
        selectedmenu = menuitems.length - 1;
        setSelectedMenuStyle(0);
        selectedmenu = 0;
        //sendRequest('menu', 'menuid=0', onSelectMenuResponse);
        /* IE hack */
        setTimeout("sendRequest('menu', 'menuid=0', onSelectMenuResponse);", 0);
        setWait();
        
    };
    addEvent(window, 'load', bodymain);
	
	function selectEditCell1(event){
		return selectEditCell(event);
	}
	

</script>
<script src="js/debug.js" type="text/javascript">
</script>
{% endblock %}
{% block head %}
<div class="logo">
    {{ logo }}
</div>
<div class="welcome_head">
    {% if user %}<a href="{{href_logout|escape}}">Logout</a>
    <br/>
    {{ user.nickname }}
    {% else %}<a href="{{href_login|escape}}">Login</a>
    {% endif %}
</div>
{% endblock %}
{% block left %}
<div id="leftmenu">
    {% for menuitem  in menu %}
    <div class="menu">
        <span class="menuid">{{ forloop.counter0 }}</span>
        {{ menuitem }}
    </div>
    {% endfor %} 
</div>
{% endblock %}
{% block footer %}
<div class="debug">
    <span class="spandebug" id="spandebug"></span>
</div>
{% endblock %}